<template>
	<view>
		<view class="card">
			<view class="list">
				<text class="biaoti">房源信息</text>
			</view>
			<view class="line" />
			<view class="list" @click="opens">
				<text class="title required">所在城市</text>
				<view :class="['title1',data.from.cityName ?'setTitle':'']">{{data.from.cityName||'请选择'}}</view>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="aspectFit"
					class="more_icon"></image>
			</view>
			<view class="line" />
			<view class="list">
				<text class="title required">小区名称</text>
				<input type="text" placeholder="请选择" v-model="data.from.villageName" />
				<!-- <image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="aspectFit" class="more_icon"></image> -->
			</view>
			<view class="line" />
			<view class="list">
				<text class="title required">楼栋房号</text>
				<input type="text" placeholder="栋 - 楼层 - 房号" v-model="data.from.roomNo" />
			</view>
			<view class="line" />
			<view class="list">
				<text class="title norequired">期望月租</text>
				<input type="digit" placeholder="请输入" v-model="data.from.price" />
				<view class="jiage dis">
					元/月
				</view>
			</view>
			<view class="line" />
			<picker mode="date" @change="bindDateChange">
				<view class="list">
					<text class="title required">起租日期</text>
					<view :class="['title1',data.from.availableStartTime ?'setTitle':'']">
						{{data.from.availableStartTime||'请选择日期'}}
					</view>
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="aspectFit"
						class="more_icon"></image>
				</view>
				<view class="line" />
			</picker>
			<view class="list">
				<text class="title required">联系方式</text>
				<input type="text" placeholder="自动读取当前登录手机号" v-model="data.from.delegatePhone" />
			</view>
			<view class="line" style="margin-bottom: 16rpx;" />
		</view>
		<!-- <view class="list">
			<text class="title">问题描述</text>
		</view>
		<view class="list" style="padding-top: 0;">
			<textarea placeholder="请输入（最多允许300字）" v-model="from.problem" placeholder-style="color:#ccc;"
				class="textarea" />
		</view> -->
		<view class="list" style="margin-top: 16rpx;">
			<text class="biaoti required">资料上传</text>
			<text class="tip">（身份证正反面和不动产登记资料页）</text>
			<!-- 不动产证，房东身份证等 -->
		</view>
		<view class="list" style="padding-top: 0;">
			<view class="upload_box">
				<view style="position: relative;" v-for="(item,index) in data.from.idCardUrls" :key="index">
					<image :src="item" mode="aspectFit" class="photo" @click="previewImage(index)"></image>
					<deleteBtn :index="index" @clearItem="deleteImage"></deleteBtn>
				</view>
				<view class="upload" @click="handleUpload('idCardUrls')">
					<image src="/pagesA/static/xiangji.svg" mode="aspectFit" class="upload_icon"></image>
					<text class="upload_text">上传图片</text>
				</view>
			</view>
		</view>
		<!-- <view class="list" style="margin-top: 16rpx;">
			<text class="biaoti">照片上传</text>
		</view> -->
		<!-- <view class="list" style="padding-top: 0;">
			<view class="upload_box">
				<view class="" v-for="(item,index) in data.from.houseCardUrls" :key="index">
					<image :src="item" mode="aspectFit" class="photo"></image>
				</view>
				<view class="upload" @click="handleUpload('houseCardUrls')">
					<image src="/pagesA/static/xiangji.svg" mode="" class="upload_icon"></image>
					<text class="upload_text">上传图片</text>
				</view>
			</view>
		</view> -->
		<view class="list" style="margin-top: 16rpx;">
			<text class="biaoti">发布流程</text>
		</view>
		<view class="list" style="padding-top: 0;">
			<view class="process_box">
				<view class="process">
					<image src="/pagesA/static/entrust/tijiao.svg" mode="aspectFit" class="process_icon"></image>
					<text class="process_text">提交委托</text>
				</view>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="aspectFit"
					class="process_down"></image>
				<view class="process">
					<image src="/pagesA/static/entrust/heshi.svg" mode="aspectFit" class="process_icon"></image>
					<text class="process_text">核实信息</text>
				</view>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="aspectFit"
					class="process_down"></image>
				<view class="process">
					<image src="/pagesA/static/entrust/shangja.svg" mode="aspectFit" class="process_icon"></image>
					<text class="process_text">房源上架</text>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="bottom_box">
			<view class="bottom_list" @click="callPhone">
				<image src="/pagesA/static/details/dianhua.svg" mode="aspectFit"></image>
				<text>电话委托</text>
			</view>
			<view class="add_btn " @click="submes">
				<button type="default" class="add_btn" :disabled="data.disabled">提交申请</button>
			</view>
		</view>
		<cityPicker :column="data.column" :default-value="data.defaultValue" :mask-close-able="data.maskCloseAble"
			@confirm="confirm" @cancel="cancel" :visible="data.visible" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		addDelegate,
		delegateDetail,
		getConfig
	} from './js/api.js'
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	import config from '@/uitls/config.js';
	import http from '@/uitls/http.js'
	import {
		chooseImageFun
	} from '../../uitls/upload.js'
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	const citySelector = requirePlugin('citySelector');
	const app = getApp()
	const data = reactive({
		from: {
			cityName: '',
			villageName: '',
			roomNo: '',
			price: '',
			availableStartTime: '',
			delegatePhone: app.globalData.phoneNumber,
			idCardUrls: [],
			houseCardUrls: [],
			city: ''
		},
		visible: false,
		maskCloseAble: true,
		str: '',
		defaultValue: '440305',
		// defaultValue: ['河北省','唐山市','丰南区'],
		column: 3
	})
	onMounted(() => {
		getPhoneConfig()
	})
	onShow(() => {
		const selectedCity = citySelector.getCity();
		// console.log('selectedCity=',selectedCity)
		if (selectedCity) {
			data.from.cityName = selectedCity.name
			data.from.city = selectedCity.id
		}
	})
	onUnload(() => {
		// 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
		citySelector.clearCity();
	})
	onLoad((options) => {
		if (options.id) {
			console.log(options.id)
			getDelegateDetail(options.id)
		}
	})
	const getDelegateDetail = async (id) => {
		let res = await delegateDetail(id)
		console.log(res)
		if (res.data.code == 0) {
			let data2 = res.data.data
			console.log(data2, data.cityName)
			data.from.cityName = data2.cityName
			data.from.villageName = data2.villageName
			data.from.roomNo = data2.roomNo
			data.from.price = data2.price
			data.from.availableStartTime = data2.availableStartTime
			data.from.delegatePhone = data2.delegatePhone
			data.from.idCardUrls = data2.idCardUrls
			data.from.houseCardUrls = data2.houseCardUrls
			data.from.city = data2.city

		}

	}


	const opens = () => {
		const key = config.navigationKey; // 使用在腾讯位置服务申请的key
		const referer = config.referer; // 调用插件的app的名称
		const hotCitys = config.HOT_CITYS; // 用户自定义的的热门城市
		const accurate = '1'; // 是否使用getLocation进行定位

		wx.navigateTo({
			url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}&accurate=${accurate}`,
		});
	}
	const confirm = (val) => {
		console.log(val)
		data.from.cityName = val.cityName
		data.from.city = val.code
		data.visible = false
	}
	const cancel = () => {
		data.visible = false
	}
	const bindDateChange = (e) => {
		// console.log(e)
		data.from.availableStartTime = e.detail.value
	}
	const submes = async () => {
		// data.disabled = true
		const objs = data.from
		if (!objs.cityName) {
			return http.isMssage('请选择所在城市')
		}
		if (!objs.villageName) {
			return http.isMssage('请输入小区名称')
		}
		if (!objs.roomNo) {
			return http.isMssage('请输入楼栋房号')
		}
		// 房价不必填
		// if (!objs.price) {
		// 	return http.isMssage('请输入房租价格')
		// }
		if (!objs.availableStartTime) {
			return http.isMssage('请选择起租日期')
		}
		if (objs.idCardUrls.length == 0) {
			return http.isMssage('请上传资料')
		}
		// if (objs.houseCardUrls.length == 0) {
		// 	return http.isMssage('请上传房源照片')
		// }
		// objs.houseCardUrls = []
		data.disabled = true
		console.log(objs)
		// return false
		try {
			const res = await addDelegate(objs)
			if (res.data.code != 0) {
				data.disabled = false
				return http.isMssage(res.data.message)
			}
			http.isMssage('新增委托成功')
			// uni.redirectTo({
			// 	url: '/pagesA/myHouse/myHouse'
			// })
			uni.navigateBack()
		} catch (err) {
			data.disabled = false
		}

	}
	const dialingPhone = ref('')
	const getPhoneConfig = async () => {
		let res = await getConfig()
		if (res.data.code == 0) {
			// console.log('res==',res.data.data.phone)
			dialingPhone.value = res.data.data?.phone
		}
	}
	const callPhone = () => {
		uni.showModal({
			title: '提示',
			content: `是否拨打客服电话 ${dialingPhone.value}？`,
			success: function(res) {
				if (res.confirm) {
					uni.makePhoneCall({
						phoneNumber: dialingPhone.value
					});
				} else if (res.cancel) {
					console.log('用户取消拨打电话');
				}
			}
		});
	}
	const handleUpload = async (type) => {
		let res = await chooseImageFun('entrust')
		if (res.imageUrl) {
			data.from[type].push(res.imageUrl)
		}
	}
	const deleteImage = (index) => {
		data.from.idCardUrls.splice(index, 1)
	}
	const previewImage = (index) => {
		uni.previewImage({
			current: data.from.idCardUrls[index], // 当前显示图片的URL
			urls: data.from.idCardUrls.map(item => item), // 需要预览的图片URL列表
			success: () => {
				console.log('预览成功');
			},
			fail: (err) => {
				console.error('预览失败', err);
			}
		});
	};
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.card {
		margin-top: 16rpx;
		padding-bottom: 16rpx;
		background: #FFFFFF;
	}

	.list {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 30rpx;
		background: #FFFFFF;
		position: relative;

		.title {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			width: 140rpx;
			text-align: left;
		}

		.jiage {
			min-width: 50rpx;
			height: 100%;
			// border: 1px solid red;
			position: absolute;
			right: 30rpx;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			text-align: right;
			font-weight: 400;
			padding: 0 10rpx;
		}

		.title1 {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #999;
			font-weight: 400;
		}

		.setTitle {
			color: #000000;
		}

		.type {
			font-size: 28rpx;

		}

		input {
			font-size: 28rpx;
		}

		.more_icon {
			position: absolute;
			right: 30rpx;
			top: 44rpx;
			width: 18rpx;
			height: 30rpx
		}

		.biaoti {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #000000;
			line-height: 36rpx;
			font-weight: 600;
			margin-right: 16rpx;
		}

		.tip {
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
			font-weight: 400;
		}

		.textarea {
			width: 658rpx;
			height: 200rpx;
			// margin: auto;
			background: #F8F8F8;
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			padding: 16rpx;
			font-size: 28rpx;
		}

		.upload_box {
			width: 100%;
			// border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			height: 200rpx;
			display: flex;
			// flex-direction: column;
			// justify-content: center;
			align-items: center;

			.photo {
				height: 156rpx;
				width: 156rpx;
				margin-right: 22.56rpx;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
			}

			.upload {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
				height: 156rpx;
				width: 156rpx;

				.upload_icon {
					width: 60rpx;
					height: 60rpx;
				}

				.upload_text {
					margin-top: 16rpx;
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #999999;
					text-align: center;
					font-weight: 400;
				}
			}

		}

		.process_box {
			width: 100%;
			// border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			height: 200rpx;
			display: flex;
			// flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.photo {
				height: 156rpx;
				width: 156rpx;
				margin-right: 22.56rpx;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
			}

			.process {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
				height: 156rpx;
				width: 156rpx;

				.process_icon {
					width: 60rpx;
					height: 60rpx;
				}

				.process_text {
					margin-top: 16rpx;
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #000000;
					text-align: center;
					font-weight: 400;
				}
			}

			.process_down {
				width: 32rpx;
				height: 38rpx;
			}

		}
	}

	.line {
		background: #eeeeee;
		height: 1rpx;
		margin: 0 30rpx;
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.bottom_list {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 16rpx;
			}

			text {
				font-family: PingFangSC-Regular;
				font-size: 20rpx;
				color: #666666;
				text-align: center;
				font-weight: 400;
			}
		}

		.add_btn {
			width: 400rpx;
			height: 84rpx;
			line-height: 84rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>